<template>
    <div v-cloak>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>投诉报修</el-breadcrumb-item>
                    <el-breadcrumb-item>投诉处理</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="complaintForm.userName" placeholder="输入投诉人">
                        <el-button slot="append" icon=" el-icon-search" @click="getComplaintListByName()"></el-button></el-input>
                </el-col>
            </el-row>
        </div>

        <div  style="display: none;" :style="{display: 'block'}">
            <el-card>
                <el-tabs style=" margin-top: 0px;margin-bottom: 0px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部投诉" name="first">
                    <div>
                        <div>
                             <el-table
                                :data="tableData.slice((complaintForm.number-1)*complaintForm.pagesize,complaintForm.number*complaintForm.pagesize)"
                                style="width: 100%"
                                >
                            <el-table-column
                                    prop="cid"
                                    label="投诉表编号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="投诉人"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="cdetail"
                                    label="投诉详情"
                                    width="400"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ctime"
                                    label="投诉时间"
                                    width="150"
                                    align="center">
                            </el-table-column>

                            <el-table-column
                                    label="处理结果"
                                    width="200"
                                    align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.cstatus==0">待处理</span>
                                        <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>



                            </el-table-column>

                            <el-table-column
                                    prop="cStatus"
                                    label="操作"
                                    width="100"
                                    align="center">
                                <template slot-scope="scope">

                                   <span v-if="scope.row.cstatus==0">
                                             <el-button type="text" @click="handle(scope.$index,scope.row)">处理</el-button>
                                        </span>
                                    <span v-if="scope.row.cstatus==1||scope.row.cstatus==2">
                                            <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                </template>
                            </el-table-column>
                        </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="complaintForm.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="complaintForm.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="待处理" name="second">
                    <div>
                        <div>
                            <el-table
                                    :data="tableData1.slice((complaintForm1.number-1)*complaintForm1.pagesize,complaintForm1.number*complaintForm1.pagesize)"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="cid"
                                        label="投诉表编号"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="投诉人"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="cdetail"
                                        label="投诉详情"
                                        width="400"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="ctime"
                                        label="投诉时间"
                                        width="150"
                                        align="center">
                                </el-table-column>

                                <el-table-column
                                        label="处理结果"
                                        width="200"
                                        align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.cstatus==0">待处理</span>
                                        <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>



                                </el-table-column>

                                <el-table-column
                                        prop="cStatus"
                                        label="操作"
                                        width="100"
                                        align="center">
                                    <template slot-scope="scope">

                                   <span v-if="scope.row.cstatus==0">
                                             <el-button type="text" @click="handle(scope.$index,scope.row)">处理</el-button>
                                        </span>
                                        <span v-if="scope.row.cstatus==1||scope.row.cstatus==2">
                                            <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange1"
                                    @current-change="handleCurrentChange1"
                                    :current-page="complaintForm1.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="complaintForm1.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total1">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="已处理" name="third">
                    <div>
                        <div>
                            <el-table
                                    :data="tableData2.slice((complaintForm2.number-1)*complaintForm2.pagesize,complaintForm2.number*complaintForm2.pagesize)"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="cid"
                                        label="投诉表编号"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="投诉人"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="cdetail"
                                        label="投诉详情"
                                        width="400"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="ctime"
                                        label="投诉时间"
                                        width="150"
                                        align="center">
                                </el-table-column>

                                <el-table-column
                                        label="处理结果"
                                        width="200"
                                        align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.cstatus==0">待处理</span>
                                        <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>



                                </el-table-column>

                                <el-table-column
                                        prop="cStatus"
                                        label="操作"
                                        width="100"
                                        align="center">
                                    <template slot-scope="scope">

                                   <span v-if="scope.row.cstatus==0">
                                             <el-button type="text" @click="handle(scope.$index,scope.row)">处理</el-button>
                                        </span>
                                        <span v-if="scope.row.cstatus==1||scope.row.cstatus==2">
                                            <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange2"
                                    @current-change="handleCurrentChange2"
                                    :current-page="complaintForm2.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="complaintForm2.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total2">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>
                    <el-tab-pane label="已评价" name="four">
                        <div>
                            <div>
                                <el-table
                                        :data="tableData3.slice((complaintForm3.number-1)*complaintForm3.pagesize,complaintForm3.number*complaintForm3.pagesize)"
                                        style="width: 100%"
                                >
                                    <el-table-column
                                            prop="cid"
                                            label="投诉表编号"
                                            width="150"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="userName"
                                            label="投诉人"
                                            width="150"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="cdetail"
                                            label="投诉详情"
                                            width="400"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="ctime"
                                            label="投诉时间"
                                            width="150"
                                            align="center">
                                    </el-table-column>

                                    <el-table-column
                                            label="处理结果"
                                            width="200"
                                            align="center">

                                        <template slot-scope="scope">
                                            <span v-if="scope.row.cstatus==0">待处理</span>
                                            <span v-if="scope.row.cstatus==2||scope.row.cstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                        </template>



                                    </el-table-column>

                                    <el-table-column
                                            prop="cStatus"
                                            label="操作"
                                            width="100"
                                            align="center">
                                        <template slot-scope="scope">

                                   <span v-if="scope.row.cstatus==0">
                                             <el-button type="text" @click="handle(scope.$index,scope.row)">处理</el-button>
                                        </span>
                                            <span v-if="scope.row.cstatus==1||scope.row.cstatus==2">
                                            <el-button type="text" @click="deleteComplaint(scope.row)">删除</el-button>
                                        </span>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <el-pagination
                                        style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                        @size-change="handleSizeChange3"
                                        @current-change="handleCurrentChange3"
                                        :current-page="complaintForm3.pagenum"
                                        :page-sizes="[2, 5, 10, 15]"
                                        :page-size="complaintForm3.pagesize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total3">
                                </el-pagination>
                            </div>

                        </div>
                    </el-tab-pane>
            </el-tabs>
            </el-card>
        </div>

        <el-dialog title="维修情况" v-model="dialogVisible":visible.sync="dialogVisible" v-if='dialogVisible' :before-close="closeDiglog" >
            <el-form :model="gridForm"  ref="gridForm" >

                <el-form-item label="处理人" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.handleman"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人电话" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.cphone"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理详情" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.handleDetail"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="投诉处理" v-model="dialogFormVisible":visible.sync="dialogFormVisible" v-if='dialogFormVisible' :before-close="closeDiglog" >
            <el-form :model="form"  :rules="rules" ref="form" >

                <el-form-item label="处理人" :label-width="formLabelWidth" prop="handleman">
                    <el-input v-model="form.handleman" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人电话" :label-width="formLabelWidth" prop="cphone">
                    <el-input v-model="form.cphone"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理详情" :label-width="formLabelWidth"prop="handleDetail" >
                    <el-input v-model="form.handleDetail"  autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </div>

        </el-dialog>

    </div>

</template>

<script>
	export default {

		data() {
			return {
				total:'',
				total1:'',
				total2:'',
				total3:'',
				dialogTableVisible: false,
				value:null,
				dialogVisible:false,
				dialogFormVisible:false,
				tableData:null,
				tableData1:null,
				tableData2:null,
				tableData3:null,
				mark:0,
				activeName: 'first',
				complaintForm: {
					userName: '',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm1: {
					userName: '',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm2: {
					userName: '',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				complaintForm3: {
					userName: '',
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				form:{
					handleman:'',
					cphone:'',
					handleDetail: '',
				},
				gridForm:{
					handleman:'',
					cphone:'',
					handleDetail: '',
				},
				rules: {
					handleman: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					cphone: [
						{ required: true, message: '请填写活动形式', trigger: 'blur' }
					],
					handleDetail: [
						{ required: true, message: '请填写活动形式', trigger: 'blur' }
					]
				},
				formInline: {
					user: '',
					region: ''
				},
				formLabelWidth: '120px'
			};

		},
		created() {
			this.getComplaintList()
			this.getComplaintListByStatus(0)
			this.getComplaintListByStatus(1)
			this.getComplaintListByStatus(2)
		},
		methods: {
			//根据投诉状态列表查询
			async getComplaintListByStatus(val) {
				console.log(val)
				const {data: resp} = await this.$http.get('/complaint/findByStatus/'+val)
				if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				if(this.complaintForm.pagenum!=1 && this.mark===0)
				{
					this.complaintForm.pagenum=1
					this.complaintForm.number=this.complaintForm.pagenum
					this.mark=1
				}
				if(this.complaintForm1.pagenum!=1 && this.mark===0)
				{
					this.complaintForm1.pagenum=1
					this.complaintForm1.number=this.complaintForm.pagenum
					this.mark=1
				}
				this.complaintForm.number=this.complaintForm.pagenum

				if(val===1){
					this.tableData2 = resp.data
					this.total2 = resp.data.length
					console.log(resp)
				}
				if(val===0){
					this.tableData1 = resp.data
					this.total1 = resp.data.length
					console.log(resp)
				}
				if(val===2){
					this.tableData3 = resp.data
					this.total3 = resp.data.length
					console.log(resp)
				}

			},

			handleSizeChange(newSize) {
				// console.log(newSize)
				this.complaintForm.pagenum = 1
				this.complaintForm.pagesize = newSize
				if(this.complaintForm.userName===""){
					this.getComplaintList()
				}else{
					this.getComplaintListByName()
				}
			},
			// 监听 页码值 改变事件
			handleCurrentChange(newSize) {
				this.complaintForm.pagenum = newSize
				if(this.complaintForm.userName===""){
					this.getComplaintList()
				}else{
					this.getComplaintListByName()
				}
			},

			handleSizeChange1(newSize) {
				// console.log(newSize)
				this.complaintForm1.pagenum = 1
				this.complaintForm1.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(1)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange1(newSize) {
				this.complaintForm1.number = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(1)
				// }else{
				// 	this.getRepairListByType()
				// }
			},

			handleSizeChange2(newSize) {
				// console.log(newSize)
				this.complaintForm2.number = 1
				this.complaintForm2.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(0)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange2(newSize) {
				this.complaintForm2.number = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(0)
				// }else{
				// 	this.getRepairListByType()
				// }
			},

			handleSizeChange3(newSize) {
				// console.log(newSize)
				this.complaintForm3.number = 1
				this.complaintForm3.pagesize = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getComplaintListByStatus(3)
				// }else{
				// 	this.getComplaintListByName()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange3(newSize) {
				this.complaintForm3.number = newSize
				// if(this.complaintForm.userName===""){
				// 	this.getRepairListByStatus(3)
				// }else{
				// 	this.getRepairListByType()
				// }
			},

			async deleteComplaint(row) {
				const confirmResult = await this.$confirm(
					'此操作将永久删除该记录, 是否继续?',
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).catch(err => err)
				// 点击确定 返回值为：confirm
				// 点击取消 返回值为： cancel
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {data: resp} = await this.$http.delete('/complaint/deleteComplaintById/'+row.cid)

				this.getComplaintList()

				// })
			},

            //查询投诉列表

			async getComplaintList() {
				const {data: resp} = await this.$http.get('/complaint/findAll/' +this.complaintForm.pagenum + '/' + this.complaintForm.pagesize )

				if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				// this.$message.success('登录成功')

				this.complaintForm.number=1
				this.tableData = resp.data.records
				this.total = resp.data.total

			},

            //根据投诉人查询
			async getComplaintListByName() {
				if(this.complaintForm.userName===null){
					this.getComplaintList()
				}else {
					const {data: resp} = await this.$http.get('/complaint/findByName/' + this.complaintForm.userName)
					if (resp.code !== 200) {
						return this.$message.error('获取用户列表失败！')
					}
					if (this.complaintForm.pagenum !== 1 && this.mark === 0) {
						this.complaintForm.pagenum = 1
						this.complaintForm.number = this.complaintForm.pagenum
						this.mark = 1
					}

					this.complaintForm.number = this.complaintForm.pagenum
					this.tableData = resp.data
					this.total = resp.data.length
					this.complaintForm.userName=null
				}
			},

            //提交表单
			submitForm(formName) {

				this.form.cstatus=1
				console.log(this.form)
				this.$refs[formName].validate(async valid => {
					if (valid) {
						const {data: resp} = await this.$http.put('/complaint/updateComplain',this.form)
						this.getComplaintList(1)
                        this.dialogFormVisible=false

						console.log(resp)

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			detail:function(index,row){
				this.dialogVisible=true;
				this.gridForm=Object.assign({},row);
			},
			handle:function(index,row){
				this.dialogFormVisible=true;
				this.form=Object.assign({},row);
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			page(currentPage){
				this.getComplaintList(currentPage+1)
			}
		},

	};
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

